<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- vue实现方法 -->
        <p>{{msg}}</p>
        <input type="text" v-model="msg">

        <!-- js 原生实现 -->
        <p id="p1"></p>
        <input type="text" id="inp1" oninput="changeFn(this.value)">

    </div>
</body>

</html>
<script>
    //
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                msg: '王子'
            }
        },

    }).mount('#app')

    // vue3 实现数据响应式的原理
    // 使用js 简单实现一下

    //1. 首先学习一下 Reflect 
    // console.log(Reflect);
    // Reflect: 定义: 该对象为js内置的对象, 该对象主要用来进行数据的操作, 例如操作对象, 对对象进行curd 操作

    // let girlObj = {
    //     name: '公主',
    //     age: 18
    // }

    // 新增属性
    // 语法:  Reflect.set(目标对象,属性名,value属性值)
    // Reflect.set(girlObj, 'sex', '女')
    // console.log(girlObj);

    // 修改
    // Reflect.set(girlObj, 'sex', '男')
    // console.log(girlObj)

    // 删除
    // 语法:  Reflect.deleteProperty(目标对象, 属性名)
    // Reflect.deleteProperty(girlObj, 'age')

    // 查询/访问对象属性
    // 语法: Reflect.get(目标对象,.属性名)
    // console.log(Reflect.get(girlObj, 'sex'));



    let girlObj = {
        name: '公主',
        age: 18
    }

    // 语法: let 代理对象=  new Proxy(原对象,{get(){},set(){},deleteproperty(){}})
    let proxy1 = new Proxy(girlObj, {
        get(target, key) {
            console.log('target', target); // 原对象
            console.log('key', key); // 访问的属性
            // 当你访问代理对象的时候触发
            //console.log('触发get 方法');
            return Reflect.get(target, key)
        },
        set(target, key, val) {
            console.log('修改了');
            console.log(target, key, val);
            document.querySelector('#p1').innerHTML = val
            document.querySelector('#inp1').value = val
            return Reflect.set(target, key, val)
        },
        deleteProperty(target, key) {
            console.log('删除操作');
            console.log(target, key);
            return Reflect.deleteProperty(target, key)
        }
    });

    console.log('proxy1', proxy1);

    // 访问代理对象
    //  console.log(proxy1.name);

    // 修改代理对象
    // proxy1.name = '格格'

    // 删除代理对象属性
    // delete proxy1.name
    // console.log('girlObj', girlObj);

    // 总结: let proxy=  new Proxy(原对象.{}), 该处的原对象指的就是 vue3中的data 对象,
    // 当我修改proxy这个代理对象的事件, 然后触发了 set 和get和 delete 方法, 进而达到修改原对象的目的

    document.querySelector('#p1').innerHTML = proxy1.name
    document.querySelector('#inp1').value = proxy1.name
    // 定义修改数据的方法 changeFn
    function changeFn(val) {
        console.log(val);
        // 修改代理对象的属性
        proxy1.name = val
    }
</script>